<!-- template inhertance -->
<extend name="layout/layui24"/>

<!-- styles -->
<block name="linkcss">
    <!--日期-->
    <link href="/Public/home/css/bootstrap-datetimepicker.min.css" rel="stylesheet">
    <!--formSelects-->
    <link href="/Public/layui-formSelects/dist/formSelects-v4.css" rel="stylesheet">

    <link rel="stylesheet" href="/Public/home/css/userCenter/authorization/create.css">
</block>

<!-- scripts -->
<block name="linkjs">
    <!--日期-->
    <script src="/Public/home/js/bootstrap-datetimepicker.js"></script>
    <script src="/Public/home/js/bootstrap-datetimepicker.zh-CN.js"></script>
</block>

<!-- page title -->
<block name="webtitle">
    <title>创建授权</title>
</block>

<!-- navagations -->
<block name="breadcrumb">
    <ol class="breadcrumb breadcrumb-edit">
        <li><a href="authorization">授权</a></li>
        <li class="active">创建授权</li>
    </ol>
</block>

<!-- main body -->
<block name="content">
    <form action="" autocomplete="off" class="layui-form">
        {//获取当前登录用户的信息}
        <input name="user_id" type="hidden" value="{$Think.session.user.id}">
        <input name="user" type="hidden" value="{$Think.session.user.nickname}">

        <div class="auth">
            <div class="tr">
                <div class="section-grey-table">
                    <div class="section-title">
                        <div class="clearfix">
                            <div class="pull-left">
                                授权信息（1）
                            </div>
                            <div class="pull-right">
                                <div class="cut" title="删除此条信息"><i class="icon-trash"></i></div>
                            </div>
                        </div>
                    </div>
                    <div class="section-body">
                        <table class="table table-bordered">
                            <colgroup>
                                <col width="140">
                                <col>
                                <col width="140">
                                <col>
                            </colgroup>
                            <tbody>
                            <tr>
                                <td class="ti-10">授权模块</td>
                                <td colspan="3">
                                    <select lay-verify="required" name="auth[1][module]" lay-filter="module">
                                        <option value=""></option>
                                        <option value="ECO">ECO</option>
                                        <option value="Review">Review</option>
                                        <option value="审批">审批</option>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">授权操作</td>
                                <td colspan="3" class="ti-5 action">
                                    <input type="checkbox" class="layui-input" title="评审" name="auth[1][auth_action][review]" value="review">
                                    <input type="checkbox" class="layui-input" title="发起评审" name="auth[1][auth_action][send]" value="send">
                                    <input type="checkbox" class="layui-input" title="编辑" name="auth[1][auth_action][edit]" value="edit">
                                    <input type="checkbox" class="layui-input" title="删除" name="auth[1][auth_action][del]" value="del">
                                    <input type="checkbox" class="layui-input" title="撤回" name="auth[1][auth_action][pull]" value="pull">
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">被授权人</td>
                                <td colspan="3">
                                    <select lay-verify="required" name="auth[1][auth_user_id]" lay-search>
                                        <option value=""></option>
                                        <volist id="vo" name="auth">
                                            <option value="{$vo.auth_user_id}">{$vo.nickname}</option>
                                        </volist>
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">开始时间</td>
                                <td>
                                    <input class="layui-input start start1" lay-verify="required" name="auth[1][start]"
                                           type="text">
                                </td>
                                <td class="ti-10">结束时间</td>
                                <td>
                                    <input class="layui-input end end1" lay-verify="required" name="auth[1][end]"
                                           type="text">
                                </td>
                            </tr>
                            <tr>
                                <td class="ti-10">备注</td>
                                <td colspan="3">
                                    <textarea class="layui-textarea" name="auth[1][remark]"></textarea>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>

        <!--按钮-->
        <div class="mt-20">
            <button class="layui-btn" lay-filter="save" lay-submit type="button">保存</button>
            <button class="layui-btn layui-btn-primary">重置</button>
            <button class="layui-btn layui-btn-primary add" type="button">新增</button>
        </div>
    </form>
</block>

<block name="scripts">
    <script>
        $(function () {
            layui.config({
                base: '/Public/'
            }).extend({
                formSelects: 'layui-formSelects/src/formSelects-v4'
            });

            layui.use(['form', 'formSelects'], function () {
                var form = layui.form,
                    formSelects = layui.formSelects;

                //绑定时间函数
                function bindTime(index) {
                    $('.start'+index).datetimepicker({
                        language:  'zh-CN',
                        format:'yyyy-mm-dd',
                        todayBtn:  true,
                        autoclose: true,
                        todayHighlight: true,
                        minView: "month"
                    }).on('change',function(ev){
                        $('.end'+index).datetimepicker('setStartDate',$('.start'+index).val());
                    });
                    $('.end'+index).datetimepicker({
                        language:  'zh-CN',
                        format:'yyyy-mm-dd',
                        todayBtn:  true,
                        autoclose: true,
                        todayHighlight: true,
                        minView: "month"
                    }).on('change',function(ev){
                        $('.start'+index).datetimepicker('setEndDate',$('.end'+index).val());
                    });
                }

                //初始时间函数
                bindTime(1);

                //循环遍历序号
                function Traversing() {
                    $('.auth .section-grey-table').each(function (n) {
                        n = n + 1;
                        $(this).find('.pull-left').text('授权信息（' + n + '）');
                    });
                }

                //监听select授权模块的选择，并渲染授权操作列表
                form.on('select(module)', function (data) {
                    console.log(data.value); //得到被选中的值,根据该值渲染子操作

                    // $(this).parents('.tr').find('.action'); 表示该模块对应的子操作显示的td
                });

                var index = 2;

                //操作事件--添加
                $(document).on('click', '.add', function () {
                        var html = `
                             <div class="tr">
                                 <div class="section-grey-table">
                                    <div class="section-title">
                                        <div class="clearfix">
                                            <div class="pull-left"></div>
                                            <div class="pull-right">
                                                <div class="cut" title="删除此条信息"><i class="icon-trash"></i></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="section-body">
                                        <table class="table table-bordered">
                                            <colgroup>
                                                <col width="140">
                                                <col>
                                                <col width="140">
                                                <col>
                                            </colgroup>
                                            <tbody>
                                                <tr>
                                                    <td class="ti-10">授权模块</td>
                                                    <td colspan="3">
                                                        <select name="auth[${index}][module]" lay-verify="required" lay-filter="module">
                                                            <option value=""></option>
                                                            <option value="ECO">ECO</option>
                                                            <option value="Review">Review</option>
                                                            <option value="审批">审批</option>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="ti-10">授权操作</td>
                                                    <td colspan="3" class="ti-5 action">
                                                        <input type="checkbox" class="layui-input" title="评审" name="auth[${index}][auth_action][review]" value="review">
                                                        <input type="checkbox" class="layui-input" title="发起评审" name="auth[${index}][auth_action][send]" value="send">
                                                        <input type="checkbox" class="layui-input" title="编辑" name="auth[${index}][auth_action][edit]" value="edit">
                                                        <input type="checkbox" class="layui-input" title="删除" name="auth[${index}][auth_action][del]" value="del">
                                                        <input type="checkbox" class="layui-input" title="撤回" name="auth[${index}][auth_action][pull]" value="pull">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="ti-10">被授权人</td>
                                                    <td colspan="3">
                                                        <select name="auth[${index}][auth_user_id]" lay-verify="required">
                                                            <option value=""></option>
                                                            <volist name="auth" id="vo">
                                                                <option value="{$vo.auth_user_id}">{$vo.nickname}</option>
                                                            </volist>
                                                        </select>
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="ti-10">开始时间</td>
                                                    <td>
                                                        <input type="text" name="auth[${index}][start]" class="layui-input start start${index}" lay-verify="required">
                                                    </td>
                                                    <td class="ti-10">结束时间</td>
                                                    <td>
                                                        <input type="text" name="auth[${index}][end]" class="layui-input end end${index}" lay-verify="required">
                                                    </td>
                                                </tr>
                                                <tr>
                                                    <td class="ti-10">备注</td>
                                                    <td colspan="3">
                                                        <textarea name="auth[${index}][remark]" class="layui-textarea"></textarea>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>`;

                        //在最后追加
                        $('.auth').append(html);

                        //重新绑定时间
                        bindTime(index);

                        //产品计数加1
                        index++;

                        //重新遍历序号
                        Traversing();

                        form.render();
                });

                //操作事件--减少
                $(document).on('click', '.cut', function () {
                    var _this  = $(this);
                    layer.confirm("确定要删除此条授权信息吗？",{icon: 3},function (index) {
                        // 获取明细数量
                        var _len = _this.parents('.auth').find('.section-grey-table').length;
                        //至少保留一项
                        if (_len < 2) {
                            layer.msg('至少保留一项明细', {icon: 0});
                        } else {
                            //删掉
                            _this.parents('.section-grey-table').remove();

                            //重新遍历序号
                            Traversing();
                        }
                        layer.close(index);//关闭
                    })
                });

                //监听保存为草稿
                form.on('submit(save)', function (data) {
                    console.log(data.field);
                    $.post('', data.field, function (response) {
                        if (response.code) {
                            layer.msg(response.msg, {icon: 2});
                        } else {
                            //do something(to edit)
                            location.href = 'xx';
                        }
                    }, 'json')
                })
            })
        })
    </script>
</block>